import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useEffect, useState } from 'react';
import { ButtonProps } from 'antd/es/button/button';
import { ViewType, CameraType, CameraDirection } from '@manycore/custom-ksg-viewer-sdk';
import Slider from 'antd/es/slider';
import { useCustomizedInteraction } from './useCustomizedInteraction';
import ToolTip from 'antd/es/tooltip';

const ViewTypeText = {
    [ViewType.Front]: '前视图',
    [ViewType.Back]: '后视图',
    [ViewType.Left]: '左视图',
    [ViewType.Right]: '右视图',
    [ViewType.Top]: '顶视图',
    [ViewType.Bottom]: '底视图',
}

const CameraDirectionText = {
    [CameraDirection.Front]: '前进',
    [CameraDirection.Back]: '后退',
    [CameraDirection.Left]: '左移',
    [CameraDirection.Right]: '右移',
    [CameraDirection.Up]: '上移',
    [CameraDirection.Down]: '下移',
}

let lastValue: number = 100;

export function CameraDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
        buttonProps?: ButtonProps;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app } } = AppStore.useContainer();
    const [cameraType, setCameraType] = useState<CameraType>(CameraType.Perspective);

    useEffect(() => {
        app!.cameraService.switchCamera(cameraType);
    }, [cameraType])

    const [enable, toggleInteractionMode] = useCustomizedInteraction(app!);

    const CameraRotateAPIs = [
        {
            name: '相机向左旋转30°',
            onClick: () => app?.cameraService.rotateCameraAroundFocus({ verticalAngle: 0, horizontalAngle: 30 / 180 * Math.PI })
        }, {
            name: '相机向右旋转30°',
            onClick: () => app?.cameraService.rotateCameraAroundFocus({ verticalAngle: 0, horizontalAngle: -30 / 180 * Math.PI })
        },
        {
            name: '相机向上旋转30°',
            onClick: () => app?.cameraService.rotateCameraAroundFocus({ horizontalAngle: 0, verticalAngle: 30 / 180 * Math.PI })
        }, {
            name: '相机向下旋转30°',
            onClick: () => app?.cameraService.rotateCameraAroundFocus({ horizontalAngle: 0, verticalAngle: -30 / 180 * Math.PI })
        },
    ]

    return <>
        <Divider> 相机切换 </Divider>
        {createButton([{
            name: `切换至${cameraType === CameraType.Perspective ? '正交' : '透视'}相机`,
            onClick: () => {
                const nextCameraType = cameraType === CameraType.Perspective ? CameraType.Orthographic : CameraType.Perspective;
                setCameraType(nextCameraType);
            }
        }])}
        <Divider> 相机视角切换 </Divider>
        {createButton([
            ...Object.entries(ViewTypeText).map(([key, text]) => {
                return {
                    name: text,
                    onClick: () => app?.cameraService.switchView(key as ViewType)
                }
            })
        ])}
        <Divider> 相机移动 </Divider>
        {createButton([
            ...Object.entries(CameraDirectionText).map(([key, text]) => {
                return {
                    name: text,
                    onClick: () => app?.cameraService.moveCamera({
                        direction: key as CameraDirection
                    })
                }
            })
        ])}
        <Slider
            defaultValue={lastValue}
            min={0}
            max={200}
            step={1}
            onChange={(value) => {
                // 由于onChange触发频率和滑动速度有关 这边计算了差值做补齐
                const delta = Math.abs(value - lastValue);
                if (value < lastValue) {
                    app?.cameraService.moveCamera({ direction: CameraDirection.Back, scale: delta });
                } else if (value > lastValue) {
                    app?.cameraService.moveCamera({ direction: CameraDirection.Front, scale: delta });
                }
                lastValue = value;
            }}
        />

        <Divider> 相机转动 </Divider>
        {createButton(CameraRotateAPIs)}
        <Divider> 自定义场景交互 </Divider>
        <ToolTip title='右键旋转-左键平移-滚轮向外缩小/向内放大'>
            {createButton([{
                name: `${enable ? '关闭' : '开启'}自定义交互`,
                onClick: () => toggleInteractionMode(),
            }])}
        </ToolTip>
        <Divider> 调整成像比例 </Divider>
        <Slider
            min={50}
            max={100}
            step={1}
            onChange={(value) => {
                app?.cameraService.unstable__adaptViewer({ scale: value })
            }}
        />
    </>
}